<template>
    <div>
        <div class="top">
            <!-- 标题栏 -->
            <van-nav-bar title="百慕大影城">
                <template #right>
                    <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end">
                        <template #reference>
                            <van-icon name="apps-o" size="20" />
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>
            <!-- 广告头 -->
            <AppHeader />
            <!-- 内容导航 -->
            <div class="top-nav">
                <van-popover v-model:show="navshowPopover" :actions="navactions">
                    <template #reference>
                        <span class="addr">北京</span>
                    </template>
                </van-popover>
                <van-tabs v-model:active="navActive" class="tabs">
                    <van-tab name="1" title="热映"></van-tab>
                    <van-tab name="2" title="待映"></van-tab>
                    <van-tab name="3" title="经典"></van-tab>
                </van-tabs>
                <van-icon name="search" color="#f03d37" size="25" />
            </div>
        </div>
        <div class="movie-list">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
                <van-list v-if="movieData.length != 0" v-model:loading="loading" :finished="finished"
                    finished-text="我也有底线0~0" @load="onLoad">
                    <MovieItem v-for="item in movieData" :key="item.id" :movie="item" @click="goDetail(item.id)" />
                </van-list>
            </van-pull-refresh>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import $http from '@/http/index';
import Movie from '@/types/Movie';
import myStore from '@/utils/Store';
import { useRouter } from "vue-router";

// 广告栏
// import AppHeader from '@/components/AppHeader.vue';
// 电影列表项
// import MovieItem from '@/components/MovieItem.vue';

let movieData: Array<Movie> = reactive([])
// 页面挂载
onMounted(() => {
    $http.movieApi.queryByCategoryId({ cid: 1, page: 1, pagesize: 20 }).then(res => {
        // console.log(res);
        movieData.push(...res.data.data.result)
    })
})


//处理首页右上角弹出菜单
const showPopover = ref(false);
// 通过 actions 属性来定义菜单选项
const actions = [
    { text: '首页' },
    { text: '榜单' },
    { text: '热点' },
    { text: '商城' },
];



// 顶部导航
const navActive = ref('1');
const navshowPopover = ref(false);
// 通过 actions 属性来定义菜单选项
const navactions = [
    { text: '北京' },
    { text: '武汉' },
    { text: '江西' },
];


//触底加载
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const pagesize = 20;
const onLoad = () => {
    // 异步更新数据
    let cid = navActive.value //类别ID
    let nextPage = ++page.value;
    $http.movieApi.queryByCategoryId({ cid: cid, page: nextPage, pagesize: pagesize }).then(res => {
        let list = res.data.data.result
        movieData.push(...res.data.data.result);

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.length == 0) {
            finished.value = true;
        }
    })
};

// 下拉刷新
const refreshing = ref(false);
const onRefresh = () => {
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    page.value = 1;
    let cid = navActive.value //类别ID
    $http.movieApi.queryByCategoryId({ cid: cid, page: 1, pagesize: 20 }).then(res => {
        let list = res.data.data.result
        movieData.splice(0, movieData.length, ...list);
        myStore.set(cid, list);
        // 加载状态结束
        loading.value = false;
        refreshing.value = false;
    })
};


//监听navActive的变化
watch(navActive, (newVal, oldVal) => {
    window.scrollTo(0, 0);
    page.value = 1;
    finished.value = false;

    let list = myStore.get(newVal);
    if (list) {
        movieData.splice(0, movieData.length, ...list);
    } else {
        //重新发送请求，加载新类别下的首页电影列表
        $http.movieApi.queryByCategoryId({ cid: newVal, page: 1, pagesize: 20 }).then(res => {
            let list = res.data.data.result
            movieData.splice(0, movieData.length, ...list);
            //存缓存
            myStore.set(newVal, list);
        })
    }
})


// 点击跳转详情页
const router = useRouter()
const goDetail = (id: number) => {
    router.push(`/movie-details/${id}`)
}


</script>

<style lang="scss" scoped>
.top {
    top: 0;
    position: sticky;
    width: 100%;
    background: #fff;
    z-index: 99;
}

.top-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 48px;
    border: 1px solid #eee;
    padding: 0 15px;

    .addr:after {
        content: '';
        display: inline-block;
        width: 0px;
        height: 0px;
        border: 4px solid transparent;
        border-top-color: #444;
        vertical-align: middle;
        margin-left: 5px;
    }

    .tabs {
        margin: 0 30px;
        flex: 1;
    }
}

.movie-list {
    margin-bottom: 50px;
    padding: 0 5px;
}

::v-deep .van-tab__text {
    font-size: 16px;
    font-weight: bold;
}
</style>

<style>
:root {
    --van-nav-bar-background-color: #f03d37;
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
}
</style>
